<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">
          <div class="mui-segmented-control mh-segmented">
            <a class="mui-control-item mui-active" @click="handleCondition(1)"><span>全部</span></a>
            <a class="mui-control-item" @click="handleCondition(2)"><span>收入</span></a>
            <a class="mui-control-item" @click="handleCondition(3)"><span>支出</span></a>
          </div>
        </h1>
      </header>

<!--       <div class="option-row bg-w">
        <div class="mh-pd search-con">
          <a href="javascript:">全部 <span class="mh-arrow-down"></span></a>
          <a href="javascript:">按日查询 <span class="mh-arrow-down"></span></a>
        </div>
        <div></div>
      </div> -->

      <p class="total-row">支出 ￥{{outcome}} 收入 ￥{{income}}</p>

      <div class="bill-list-box bg-w">
        <ul>
          <li class="bill-list" v-for="item in recentBill" :key="item.id" v-if='type==1'>
            <a href="javascript:" class="flex-bt">
              <div class="bill-l">
                <p class="g-name" v-text="`${item.msg}`">种类-名称</p>
                <span class="g-time" v-text="item.create_time">2018-04-09 14:09</span>
              </div>
              <div class="bill-r">
                <!-- <span v-if="item.payType === 1" class="in" v-text="`+￥${item.total}`">+￥0.00</span> -->
                <span class="out" v-text="`￥${item.gold}`">+￥0.00</span>
              </div>
            </a>
          </li>
          <li class="bill-list" v-for="item in recentBill" :key="item.id" v-if='type==2 && item.gold > 0'>
            <a href="javascript:" class="flex-bt">
              <div class="bill-l">
                <p class="g-name" v-text="`${item.msg}`">种类-名称</p>
                <span class="g-time" v-text="item.create_time">2018-04-09 14:09</span>
              </div>
              <div class="bill-r">
                <span class="out" v-text="`￥${item.gold}`">+￥0.00</span>
              </div>
            </a>
          </li>
          <li class="bill-list" v-for="item in recentBill" :key="item.id" v-if='type==3 && item.gold < 0'>
            <a href="javascript:" class="flex-bt">
              <div class="bill-l">
                <p class="g-name" v-text="`${item.msg}`">种类-名称</p>
                <span class="g-time" v-text="item.create_time">2018-04-09 14:09</span>
              </div>
              <div class="bill-r">
                <span class="out" v-text="`￥${item.gold}`">+￥0.00</span>
              </div>
            </a>
          </li>
        </ul>
      </div>

    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "billing-detail",
    data () {
      return {
        recentBill: [
          // {
          //   id: '1',
          //   type: '购物',
          //   name: '鲜花',
          //   total: '100',
          //   payType: 1,
          //   time: '2018-12-12 12:12'
          // }
        ],
        type: 1,
        outcome: 0,
        income: 0
      }
    },
    methods: {
      handleCondition (i) {
        this.type = i
      }
    },
    components: {
      MhHeader
    },
    created(){
      let self = this;
      let outcome = 0, income = 0;
      MH_API.getBillList({}).then(res => {
        if (res.status === 200) {
          self.recentBill = res.data;
          for(let i=0,len=res.data.length;i<len;i++){
            if(res.data[i].gold > 0){
              income += parseFloat(res.data[i].gold)
            }
            else{
              outcome += parseFloat(res.data[i].gold)
            }
          }
          self.outcome = outcome;
          self.income = income;
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";
  .mui-icon {line-height: 3rem;}
  .mui-segmented-control {
    padding: 0 2rem;
   .mui-control-item {
     color: #333;
     &.mui-active {
       color: #e685aa;
       span {
         border-bottom: .2rem solid #de73a4;
       }
     }
   }
  }
  .search-con {
    a {
      margin-right: 1rem;
      @include sc(1.3rem, #999);
    }
  }
  .total-row {
    padding: 1.5rem 1rem;
    @include sc(1.3rem, #999);
  }

  .bill-list {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid #eee;
  }
  .g-name {@include sc(1.5rem, #333);}
  .g-time {@include sc(1.2rem, #999);}
  .out {@include sc(1.8rem, #f9625d);}
  .in {@include sc(1.8rem, #333);}

</style>
